<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年份" prop="contractYear">
        <el-date-picker v-model="queryParams.contractYear" type="year" placeholder="选择年" format="yyyy年"
          value-format="yyyy" />
      </el-form-item>
      <el-form-item label="供应商" prop="supplierId">
        <el-select v-model="queryParams.supplierId" placeholder="请选择供应商" clearable filterable size="small">
          <el-option v-for="dict in supplierIdOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="合同编号" prop="contractNo">
        <el-input v-model="queryParams.contractNo" placeholder="请输入合同编号" clearable size="small"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="申请编号" prop="applyNo">
        <el-input v-model="queryParams.applyNo" placeholder="请输入申请编号" clearable size="small"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button v-no-more-click type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
        <el-button v-no-more-click icon="Refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="季度统计" name="first">
        <el-table v-loading="loading" :data="quarterList">
          <el-table-column label="季度" align="center" prop="contractQuarter" />
          <el-table-column label="申请编号" align="center" prop="applyNo" />
          <el-table-column label="合同编号" align="center" prop="contractNo" />
          <el-table-column label="供应商名称" align="center" prop="supplierName" />
          <el-table-column label="应付金额" align="center" prop="contractAmount" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="月份统计" name="second">
        <el-table v-loading="loading" :data="monthList">
          <el-table-column label="月份" align="center" prop="contractMonth" />
          <el-table-column label="申请编号" align="center" prop="applyNo" />
          <el-table-column label="合同编号" align="center" prop="contractNo" />
          <el-table-column label="供应商名称" align="center" prop="supplierName" />
          <el-table-column label="应付金额" align="center" prop="contractAmount" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { monthReport, quarterReport } from "@/api/purchaseReport/purchaseContractReport";
import { getQueryData } from '@/api/query/comQuery'

// 响应式数据
const activeName = ref('first')
const loading = ref(true)
const showSearch = ref(true)
const monthList = ref([])
const quarterList = ref([])
const supplierIdOptions = ref([])
const queryForm = ref(null)

const queryParams = reactive({
  contractNo: null,
  applyNo: null,
  supplierName: null,
  contractYear: null,
  contractQuarter: null,
  contractMonth: null,
})

// 初始化年份
const initYear = () => {
  const date = new Date()
  queryParams.contractYear = date.getFullYear().toString()
}

// 获取数据
const getList = async () => {
  try {
    loading.value = true
    const monthRes = await monthReport(queryParams)
    const quarterRes = await quarterReport(queryParams)
    monthList.value = monthRes.rows
    quarterList.value = quarterRes.rows
  } finally {
    loading.value = false
  }
}

// 处理查询
const handleQuery = () => {
  getList()
}

// 重置查询
const resetQuery = () => {
  queryForm.value.resetFields()
  handleQuery()
}

// 导出处理
const handleExport = async () => {
  try {
    await ElMessageBox.confirm('是否确认导出所有采购合同报表数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    const res = await exportPurchaseContractReport(queryParams)
    download(res.msg)
  } catch (error) {
    // 取消导出不处理
  }
}

// 初始化
onMounted(async () => {
  initYear()
  await getList()
  const res = await getQueryData("query_supplier")
  supplierIdOptions.value = res.data
})
</script>
